
<script>
import classNames from 'classnames';

export default {
  name: 'TouchFeedBack',
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    activeStyle: {
      type: Object,
      default: () => {},
    },
    activeClass: {
      type: String,
      default: 'je-active',
    },
  },
  data() {
    return {
      active: false,
      eventMaps: {
        touchstart: (e) => { this.triggerEvent(e, true); },
        touchmove: (e) => { this.triggerEvent(e, false); },
        touchend: (e) => { this.triggerEvent(e, false); },
        touchcancel: (e) => { this.triggerEvent(e, false); },
        mousedown: (e) => { this.triggerEvent(e, true); },
        mouseup: (e) => { this.triggerEvent(e, false); },
        mouseleave: (e) => { this.triggerEvent(e, false); },
      },
    };
  },
  updated() {
    const { disabled } = this.$props;
    if (disabled && this.active) {
      this.active = false;
    }
  },
  methods: {
    triggerEvent(type, isActive) {
      if (isActive !== this.active) {
        this.active = isActive;
      }
    },
  },
  render(h) {
    const { default: [vNode] } = this.$slots;
    // const children = vNode.children || vNode.text;
    const { disabled, activeStyle, activeClass } = this.$props;
    if (!disabled && this.active) {
      let { style, className } = vNode.context.$props;

      if (activeStyle !== false) {
        if (activeStyle) {
          style = { ...style, ...activeStyle };
        }
        className = classNames(vNode.data.class, activeClass);
      }

      return h(vNode.tag, {
        ...{
          style,
          class: className,
          on: { ...this.eventMaps },
        },
      }, vNode.children);
    }
    return h(vNode.tag, {
      class: vNode.data.class,
      on: { ...this.eventMaps },
    }, vNode.children);
  },
};
</script>
<style lang="less" scoped>

</style>
